<template>
  <SwipePagination v-model="page" :can-swipe="canSwipe">
    <SearchMain></SearchMain>
    <template #page-2>
      <Viewer :router="viewerRouter" @back="page = 1"></Viewer>
    </template>
  </SwipePagination>
</template>
<script setup>
import { computed, defineAsyncComponent, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useSearchStore } from '@/store/search'
import { useNavRefresh } from '@/compositions/nav/refresh'
import { useMobileViewerRouter } from '@/compositions/viewer/router/mobileViewerRouter'
import { NAVS } from '@/constant'

const SwipePagination = defineAsyncComponent(() => import('@/components/swipe/SwipePagination.vue'))
const SearchMain = defineAsyncComponent(() => import('@/pages/search/SearchMain.vue'))
const Viewer = defineAsyncComponent(() => import('@/components/viewer/Viewer.vue'))

const searchStore = useSearchStore()
const { page } = storeToRefs(searchStore)
const { setupViewerRouter } = searchStore

const viewerRouter = useMobileViewerRouter('mobile-search')
const { currIndex, active } = viewerRouter

setupViewerRouter(viewerRouter)

const canSwipe = computed(() => page.value === 2 && currIndex.value === 0)
watch(
  page,
  function cb(v) {
    clearTimeout(cb.timerId)
    cb.timerId = setTimeout(() => (active.value = v !== 1), 250) // 轉場完後(250ms)再執行
  },
  { immediate: true },
)

useNavRefresh(NAVS.SEARCH, () => (page.value = 1))
</script>
